<template>
  <!-- 数据卡片 -->
  <div id="cardses">
    <div v-for="item in dataInit.realTimeList">
      <div
        id="cards"
        :style="
          0.15 <= item.pressure && item.pressure < 0.25
            ? as
            : 0.25 <= item.pressure && item.pressure < 0.28
            ? asd
            : asdv
        "
      >
        <a-card :style="{ width: '260px' }" :title="item.address">
          <template #extra>
            <!-- 关注的图标显示 -->
            <div v-show="att(item.attention)">
              <a-space size="large">
                <icon-star-fill
                  :style="{ fontSize: '22px', color: '#ffcc00' }"
                />
              </a-space>
            </div>
          </template>
          <div id="su">
            <div class="datas">
              <div>压力:</div>
              <div>
                <span id="numberd">{{ item.pressure.toFixed(2) }}</span>
                <span>MPa</span>
              </div>
            </div>
            <div class="datas">
              <div>更新时间:</div>
              <div>
                <span>{{ item.updateTime }}</span>
              </div>
            </div>
          </div>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { IconStarFill } from "@arco-design/web-vue/es/icon";
import { userRealTimeData } from "../../store/realTime/realTimeData";
let att = (a: number) => {
  console.log(a);
  return a == 2;
};
let as = {
  "border-left": "4px solid #1359e5",
};
let asd = {
  "border-left": "4px solid #ffcc00",
};
let asdv = {
  "border-left": "4px solid #ff0000",
};
let dataInit = userRealTimeData();
</script>

<style scoped>
#cardses {
  display: flex;
  flex-wrap: wrap;
}
.datas {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.arco-card-body {
  height: 54px;
}

#numberd {
  font-size: 18px;
  color: #0079fe;
  font-weight: 700;
  padding-right: 10px;
}

#cards {
  width: 260px;
  border-radius: 3px;
  border-left: 4px solid #1359e5;
  font-family: "微软雅黑";
  margin-left: 10px;
  margin-bottom: 10px;
}
</style>
